/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/
/* stylelint-disable declaration-no-important */

@import url("tools/typography.css");

:host {
  --tui-error-fill-night: var(--color-red);

  display: block;

  &.invalid.show-errors {
    &.update-on-submit.submitted::ng-deep,
    &.update-on-blur.dirty::ng-deep,
    &.update-on-change.dirty::ng-deep,
    &.update-on-blur.touched::ng-deep,
    &.update-on-change.touched::ng-deep {
      & tui-wrapper::after {
        color: var(--color-red) !important;
      }

      & [data-appearance="textfield"] {
        --color-gray40: var(--color-red);
        --tui-base-03: var(--color-red);
      }

      & tui-text-area .t-content {
        background: var(--color-red10);
      }

      &._focused {
        /* stylelint-disable-next-line max-nesting-depth */
        &::after {
          color: var(--color-red);
        }
      }
    }
  }
}

:host.invalid.show-errors:focus-within {
  &.update-on-submit.submitted::ng-deep,
  &.update-on-blur.dirty::ng-deep,
  &.update-on-change.dirty::ng-deep,
  &.update-on-blur.touched::ng-deep,
  &.update-on-change.touched::ng-deep {
    & tui-text-area .t-content {
      background-color: var(--color-white);
    }
  }
}

tui-text-area {
  & ::ng-deep {
    & .placeholder {
      --tui-text-01: var(--color-gray60);
      --tui-text-02: var(--color-gray60);
    }
  }
}

.input-container {
  margin-block-end: var(--spacing-4);
}

:host::ng-deep {
  & .invitation-textarea {
    @mixin font-paragraph;

    &.invalid {
      & [data-appearance="textfield"] {
        background: var(--color-red10);

        /* stylelint-disable-next-line max-nesting-depth */
        &::after {
          border: 2px solid var(--color-red60);
          border-radius: 3px;
        }
      }
    }

    &._focused {
      & .t-placeholder {
        color: var(--color-gray60);
      }
    }

    &.bottom-space {
      & .t-wrapper {
        padding-block: var(--spacing-8) var(--spacing-24);
      }
    }

    & .input-container {
      margin-block-end: var(--spacing-8);
    }

    & .t-placeholder {
      align-items: center;
      color: var(--color-gray60);
      display: flex;
      font: inherit;
      font-size: inherit;
      inset-block-start: var(--spacing-4);
      line-height: inherit;
      margin-block-start: 1px;
      padding-inline-start: var(--spacing-12);
    }

    & .t-wrapper {
      align-items: center;
      color: var(--color-gray80);
      display: flex;
      line-height: 1.5;
      min-block-size: var(--spacing-32);
      padding-block: var(--spacing-4);
      padding-inline: var(--spacing-12);
      word-break: break-word;
    }

    &.compressed {
      min-block-size: 0;
    }

    &.optional {
      @mixin font-small;

      color: var(--color-gray70);
    }
  }

  & .general-textarea {
    & [data-appearance="textfield"] {
      background: var(--color-white);

      &::after {
        color: var(--color-gray40);
      }

      &._focused {
        /* stylelint-disable-next-line max-nesting-depth */
        &::after {
          color: var(--color-secondary);
        }
      }
    }

    & .input-container {
      margin-block-end: var(--spacing-8);
    }

    & .t-placeholder {
      color: var(--color-gray60) !important;
      inset-block-start: var(--spacing-8) !important;
      line-height: 1.5 !important;
    }

    & .t-wrapper {
      padding-block-start: var(--spacing-8) !important;
    }

    & .t-counter {
      color: var(--color-gray70) !important;
    }
  }

  & .optional {
    @mixin font-small;

    color: var(--color-gray70);
    margin-inline-start: var(--spacing-8);
  }
}
